/* eslint-disable @typescript-eslint/no-empty-interface */
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
/* eslint-disable jsx-quotes */
/* eslint-disabled */
import React from 'react'
import { Drawer, } from 'antd';
import MenuIcon from '@/assets/images/iconfont/caidan.png'
import YINHUA from '@/assets/images/yinghua.png'
import DrawerContent from './components/drawerContent'
import ArticleList from './components/articleLIst'
import Parallax from 'parallax-js'
import { BackTop } from 'antd'
import { getArticleList,getHomeBackground } from '@/api/index'
import Loading from '@/components/Loading/index'
import { bottomHandle } from '@/utils'
import './index.scss'

interface IProps{ }
interface IState{
  visible: boolean;
  imgWidth: string | number;
  imgHeight: string|number;
  imgArr: any[];
  pageSize: number;
  pageNum: number;
  homeBackgroundList: any[];
  isLoading: boolean;
  isNext: boolean;
  articleList: any[];
  imgUrl: string;
  articleTotal: number | string;
  isContinueLoading: boolean;
  isPending: boolean;
  wWidth: number;
  wHeight: number;
}

class Index extends React.Component<IProps,IState> {
  func: any;
  constructor(props) {
    super(props)
    this.state = {
      visible: false,
      imgWidth: '',
      imgHeight: '',
      imgArr: [],
      pageSize: 5,
      pageNum: 1,
      homeBackgroundList:[], // 主页背景图
      isLoading: true, // 显示加载组件
      isNext: true,
      articleList: [],
      imgUrl:'',
      articleTotal: 0, // 文章数量
      isContinueLoading: true, // 是否继续加载
      isPending: false, // 是否正在加载数据
      wWidth: 0,
      wHeight:0
    }
    this.func = null
  }
  componentDidMount() {
    this.getHomeBackground()
    const wWidth = document.documentElement.clientWidth
    const wHeight = document.documentElement.clientHeight
      this.setState({wWidth,wHeight})
    if(wWidth>500){
    this.setState({ imgWidth: wWidth + 150 })
    this.setState({ imgHeight: wHeight + 150 })
    // this.imgWidth = wWidth + 150
    // this.imgHeight = wHeight + 150
    
    }
    if (wWidth >= 600) {
      // this.setState({ imgWidth: 1920 / 1.3 })
      // this.setState({ imgHeight: 960 })
      const scene = document.getElementById('scene')
    const parallaxInstance = new Parallax(scene, {
      relativeInput: true,
      clipRelativeInput: true,
    })
      // this.imgWidth = 1920 / 1.3; this.imgHeight = 960
    }
  
    console.log('宽度'+wWidth,'高度'+wHeight)
   
    
    // bottomHandle(this.state.isNext, async () => {
    //   if(this.state.isLoading && !this.state.isPending){
    //    await this.getArtList()
    //   this.setState({ pageNum: this.state.pageNum + 1 })
    //   }
    // })()
    this.func = bottomHandle(
      this.state.isNext, async () => {
          if(this.state.isLoading && !this.state.isPending){
           await this.getArtList()
          this.setState({ pageNum: this.state.pageNum + 1 })
          }
        }
    )
    this.func()
  }
  componentWillUnmount(){
    console.log("组件销毁前")
    this.func()
  }
  async getHomeBackground(){
    const res:any =await getHomeBackground()
    if(res.code===200){
      await this.setState({homeBackgroundList:res.data})
       this.checkDay()
    }
  }
  async getArtList() {
    this.setState({isPending:true}) // 当前正在请求 防止下拉短时间多次触发请求
    const res:any = await getArticleList({ pageNum: this.state.pageNum, pageSize: this.state.pageSize })
    if (res.code === 200) {
      this.setState({ articleTotal: res.total ,isPending:false})
      this.setState({ articleList: [...this.state.articleList, ...res.rows]})
      if (res.rows.length !== this.state.pageSize) { // 数据已加载完毕
        this.setState({ isContinueLoading: false,isLoading:false })
      }
    }else{
      this.setState({isPending:false})
    }
    console.log(res)
  }
  onClose = () => {
    this.setState({
      visible: false
    })
  }
  showDrawer() { // 打开菜单
    console.log('12312')
    this.setState(state => ({ visible: !state.visible }))
  }
  checkDay(){ // 判断今天是星期几
    const week = new Date().getDay(); 
    let client ='pc'
    if(this.state.wWidth<500){
      client='mobile'
    }
    if (week === 0) { 
      this.state.homeBackgroundList.forEach((item,index)=>{
        if(item.name==='星期天'){
          console.log('星期天')
          this.setState({imgUrl:item[client+'Url']})
        }
      })
    } else if (week === 1) { 
      this.state.homeBackgroundList.forEach((item,index)=>{
        if(item.name==='星期一'){
          this.setState({imgUrl:item[client+'Url']})
        }
      })
    } else if (week === 2) { 
      this.state.homeBackgroundList.forEach((item,index)=>{
        if(item.name==='星期二'){
          this.setState({imgUrl:item[client+'Url']})
        }
      })
    } else if (week === 3) { 
      this.state.homeBackgroundList.forEach((item,index)=>{
        if(item.name==='星期三'){
          this.setState({imgUrl:item[client+'Url']})
        }
      })
    } else if (week === 4) { 
      this.state.homeBackgroundList.forEach((item,index)=>{
        if(item.name==='星期四'){
          this.setState({imgUrl:item[client+'Url']})
        }
      })
    } else if (week === 5) { 
      this.state.homeBackgroundList.forEach((item,index)=>{
        if(item.name==='星期五'){
          console.log('星期5',item.pcUrl)
          this.setState({imgUrl:item[client+'Url']})
        }
      })
    } else if (week === 6) { 
      this.state.homeBackgroundList.forEach((item,index)=>{
        if(item.name==='星期六'){
          this.setState({imgUrl:item[client+'Url']})
        }
      })
    } 
    console.log('今天是'+week+this.state.imgUrl)
  }
  clickScreen = (e) => { // 点击屏幕
    console.log(e)
    const arr = this.state.imgArr
    const count = arr.length
    const div:any = document.createElement('div')
    console.dir(div)
    div.style.position = 'absolute'
    div.style.zIndex = 10000
    div.id = "mouseImg" + count
    const img = document.createElement('img')
    img.width = 50
    img.src = YINHUA
    // img.width='50px'
    // img.height='50px'
    console.dir(img)
    div.appendChild(img)
    document.getElementById('content')?.appendChild(div)
    const yinghua:any = document.getElementById('mouseImg' + count)
    yinghua.style.left = e.clientX + 'px'
    yinghua.style.top = e.clientY + 'px'
    arr.push("mouseImg" + count)
    this.setState({ imgArr: arr })
    setTimeout((imgArr) => {
      console.log(imgArr)
      const removeNode:any = document.getElementById(imgArr[0])
      const newImgArr = imgArr
      newImgArr.shift()
      console.log(newImgArr)
      try{
        document.getElementById('content')?.removeChild(removeNode)
      }catch(e){
        console.log(e)
      }
      
    }, 1000, this.state.imgArr)
  }
  render() {
    return (
      <div className='content' onClick={this.clickScreen} id='content'>
        <div className='max'>
          <div id="scene" className="img-outer">
            <div data-depth="0.4" className="layer">
              <img src={this.state.imgUrl} alt="" width={this.state.wWidth>500 ? this.state.imgWidth : 'auto'} height={this.state.wWidth>500 ?this.state.imgHeight : '100%'} 
              className={this.state.wWidth>500 ? 'moveImg' : ''} />
            </div>
          </div>
        </div>
        <div className='menu-icon' onClick={this.showDrawer.bind(this)}><img src={MenuIcon} alt="" /></div>
        <Drawer
          placement="top"
          zIndex={50}
          height='100%'
          closable={false}
          onClose={this.onClose}
          visible={this.state.visible}
        >
          <DrawerContent />
        </Drawer>
        <div className='article-warpper'>
          { <ArticleList articleList={this.state.articleList} />}
        </div>
        <div className='loading-box'>
          {this.state.isLoading ? <Loading /> : <span>没有更多了哦QAQ...</span>}
        </div>
        <BackTop />
      </div>
    )
  }
}
export default Index;